<template>
  <div class="goods-setting views-container">
    <choose-link ref="chooseIconLink" :config="chooseIconLinkConfig" :changeEvt="uploadIconFileChange"></choose-link>
    <choose-files ref="chooseFiless" :config="chooseFilesConfig" :changeEvt="uploadFileChange"></choose-files>
    <div class="wlm-form">
      <div class="wlm-form-header">领券中心</div>
      <div class="wlm-form-content">
        <!-- :model="formFormatData.formData" -->
        <el-form
          ref="platformdata"
          size="small"
          label-width="170px"
          class="retail-form"
          label-position="right"
          :model="formFormatData.formData"
        >
          <el-form-item
            label="页面标题"
            prop="product"
          >
            <el-input v-model="formFormatData.formData.title"></el-input>
          </el-form-item>
          <!-- <el-form-item
            label="背景色"
            prop="product"
          >
            v-model="custormItemData.style.bgcolor"
            <el-color-picker
              class="ivu-input"
              size="mini"
              v-model="formFormatData.formData.bgcolor"
            ></el-color-picker>
          </el-form-item> -->
          <el-form-item
            label="轮播图"
            prop="product"
          >
            <el-button type="" @click="lunbobtn">添加轮播图</el-button>
            <!-- @click="delItemList()" -->
            <div v-for="(item,index) in formFormatData.formData.rotation" :key="index" style="display:flex;">
              <div style="margin:20px 20px 0 0 ;border: 1px solid #ddd; width:350px;padding:10px 10px 10px 10px;background: #f6f7f9;position: relative;">
                  <i class="el-icon-circle-close" style="position: absolute;top:0;right:0px;" @click="delItemList(index)"></i>
                    <div style="display:flex;">
                        <div>图片:</div>
                        <!-- {{item}} -->
                         <!-- :src="item.thumb?item.thumb:`${require('@/assets/custorm_style/default_picture.png')}`" -->
                          <div>
                              <img
                            class="wlm-upload-img"
                            style="margin-left:10px;"
                           @click="uploadTrigger('chooseIcon',index, 'default')"
                            :src="item.thumb?item.thumb:`${require('@/assets/custorm_style/default_picture.png')}`"
                            >
                            <p class="form-help">建议尺寸：750x318</p>
                          </div>
                    </div>
                    <div style="display:flex;" class="pick">
                        <div>链接:</div>
                         <el-tooltip class="item" effect="dark" :content="item.link" placement="top">
                           <el-input style="width:280px;margin-left:10px;" v-model="item.link" @focus="uploadFileToggle(index)"  placeholder="请选择链接"></el-input>
                          </el-tooltip>
                        
                    </div>
              </div>
          </div>
           
          </el-form-item>
          <el-form-item
            label="小程序分享自定义"
            prop="product"
          >
            <!-- v-model="formFormatData.formData.share" -->
            <el-radio-group v-model="formFormatData.formData.share">
              <el-radio :label="'1'">显示</el-radio>
              <el-radio :label="'2'">不显示</el-radio>
            </el-radio-group>
          </el-form-item>
           <el-form-item label="分享图片" ref="businessbackgroundmap" v-if="formFormatData.formData.share==1">
                    <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                    <div class="form-help">推荐尺寸：750X750，尺寸不匹配时，图片将选取部分展示</div>
                </el-form-item>
                  <el-form-item label="自定义分享文案" v-if="formFormatData.formData.share==1">
                      <el-input  placeholder="请输入分享文案" v-model="formFormatData.formData.custom_share_content" width="50">
                      </el-input>
                </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
      <!-- @click="formFormatSubmit" -->
      <el-button
        size="small"
        type="primary"
        @click="formFormatSubmit"
      >保存</el-button>

    </div>
  </div>
</template>
<script>
import {
  couponCenterSave,
  couponCenterGet
} from '@/api/platform'
import ChooseLink from '@/components/ChooseLink/index'
import ChooseFiles from '@/components/ChooseFiles/index'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'collect',
  components:{
    ChooseLink,
    ChooseFiles
  },
  data() {
    return {
      index:0,
      chooseFilesConfig: {
        type: ['image'],
        model: 'normal',
        initList: [],
        file_type: 'image'
      },
       chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'share_image_id',
          model: 'img'
        }
      },
      chooseIconLinkConfig: {
        type: ['chooseLink'],
        initList: [],
        link_type: '1'
      },
      formFormatData: {
        key: ['platformdata'],
        api: {
          editForm: {
            api: couponCenterGet,
            params: {
              always: true
            },
            filters: {
             img: {
                bindInit: ['chooseBgConfig']
              }
            }
            // redirect: 'voucher_id'
          },
          submitForm: couponCenterSave
        },
        formData: {
          share_image_id:[],
          title: '',
          share:2,
          custom_share_content:'',
          rotation: [{
            link: '',
            thumb:''
          }]
        },
      },
    }
  },
  methods:{
    delItemList(index){
      this.formFormatData.formData.rotation.splice(index,1)
    },
    lunbobtn(){
      this.formFormatData.formData.rotation.push({link:'',thumb:''})
    },
    //链接打开
    uploadFileToggle(index) {
      this.index = index
      console.log("4111144444444",index)
      this.$refs.chooseIconLink.toggle()
    },
    //图片打开
    uploadTrigger(evt, index, model) {
      console.log('chooseUrl++++++++++++++', evt, index, model)
      if(evt == 'chooseIcon'){
         this.index = index
        this.$refs.chooseFiless.toggle()
      }
     
    },
    // uploadtoggle(index, type) {
    //   var data = this.custormItemData.data[index]['link']
    //   console.log('ssssssssssss', data)
    //   this.output({ type, params: { editKey: this.custormItemData.key }, data })
    //   this.imgCurrent = index
    // },
    //链接回调
    uploadIconFileChange(files) {
      const { currentRow: [file_path] } = files
      
      if (file_path) {
        const index = this.index
        console.log("sddddddddddddddddddddd",index)
        console.log(file_path, 'file_path+++++')
        // this.formFormatData.formData.rotation.map(res=>{
        //   res.link = file_path
        // })
         this.formFormatData.formData.rotation[index].link = file_path
      } else {
        this.$message.error('请选择链接~!')
      }
    },
    //图片回调
    uploadFileChange(files) {
      const index = this.index
      console.log('sssssssssssssssssssssssssssssssssss',files)
      const { key } = files
      const { displayData: [file_path] } = files
        if (this.current !== -1 && file_path) {
         this.formFormatData.formData.rotation[index].thumb = file_path.file_path
         this.formFormatData.formData.rotation = [...this.formFormatData.formData.rotation]
          console.log("8888888888888888888888",this.formFormatData.formData.rotation[index].thumb)

        }
    },
    formFormatFiltersChange(data) {
      console.log("5555",data.displayData)
        // this.chooseBgConfig.initList = data.displayData
        console.log("jjjssssdffff",this.formFormatData.formData)
         this.formFormatData.formData.share_image_id = data.displayData
      // if (data.displayData && data.displayData[0]) {
      //   this.formData.img = data.displayData[0]
      // }
    },
   
  }
}
</script>
<style lang="scss" scoped>
.pick{
    margin-top: 20px;
    /deep/ .el-input__inner{
        background: #e8effc;
    }
}
</style>